<template>
<Association>
    <template #default>
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="68px">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="成果名称" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="成果名称"
                    clearable
                    @keyup.enter="handleQuery"
                />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="负责人" prop="firstAuthorName">
                    <el-input
                    v-model="queryParams.firstAuthorName"
                    placeholder="负责人"
                    clearable
                    @keyup.enter="handleQuery"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="成果类型" prop="achievementType">
                    <el-select v-model="queryParams.achievementType" placeholder="请选择成果类型" clearable>
                    <el-option
                        v-for="dict in cfg_category_cglx"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                    </el-select>
                </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
                <el-form-item label="完成日期" prop="daterangeDate" style="width: 100%">
                    <el-date-picker clearable
                    v-model="queryParams.daterangeDate"
                    value-format="YYYY-MM-DD"
                    type="monthrange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    ></el-date-picker>
                </el-form-item>
            </el-col> -->
            <el-col :span="4">
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>      
            </el-col>
        </el-row>
    </el-form>
    </template>
    <template #Table>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" v-if="getCurRole()!='biz_kyry'">
              <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
                v-hasPermi="['research:product:add']"
              >关联</el-button>
            </el-col>
            <el-col :span="1.5" v-if="getCurRole()!='biz_kyry'">
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['research:product:remove']"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="info"
                plain
                icon="Back"
                @click="back(proxy)"
              >返回</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="成果名称" align="center" prop="name" >
                <template v-slot="scope">
                <div>
                    <el-link type="primary" @click="handleView(scope.row)"> {{ scope.row.name }}  </el-link>
                </div>
                </template>  
            </el-table-column>
            <el-table-column label="所属单位" align="center" prop="unitId">
                <template #default="scope">
                <dict-tag :options="cfg_category_ssrsdw" :value="scope.row.unitId" :showSpan="true"/>
                </template>
            </el-table-column>
            <el-table-column label="负责人" align="center" prop="firstAuthorName" />
            <el-table-column label="完成日期" align="center" prop="productDate" />
            <el-table-column label="成果类型" align="center" prop="achievementType">
                <template #default="scope">
                <dict-tag :options="cfg_category_cglx" :value="scope.row.achievementType" :showSpan="true"/>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="getCurRole()!='biz_kyry'">
                <template #default="scope">
                    <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['research:product:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
        />
    </template>
    <template #Dialog>
        <el-dialog
          :title="title"
          v-model="open"
          width="80%"
          align-center
          :before-close="cancel"
          :close-on-click-modal="false"
          :show-close="false"
          :destroy-on-close="false && true"
          draggable
        >
          <template #header="{ close }">
            <div class="dialog-header flex justify-between items-center">
              <div>{{ title }}</div>
              <el-icon class="el-icon--left cursor-pointer" @click="close"
                ><CircleCloseFilled color="#fff"
              /></el-icon>
            </div>
          </template>

          <div class="dialog-content">
            <el-card class="w-full mt-[10px]">
                <CardHead> 成果列表 </CardHead>
                <el-table v-loading="loadingInverse" :data="productListInverse">
                    <el-table-column label="名称" align="center" prop="name" >
                        <template v-slot="scope">
                        <div>
                            <el-link type="primary" @click="handleView(scope.row)"> {{ scope.row.name }}  </el-link>
                        </div>
                        </template>  
                    </el-table-column>
                    <el-table-column label="所属单位" align="center" prop="unitId">
                        <template #default="scope">
                        <dict-tag :options="cfg_category_ssrsdw" :value="scope.row.unitId" :showSpan="true"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="所有作者" align="center" prop="allAuthors"></el-table-column>
                    <el-table-column label="成果日期" align="center" prop="productDate" />
                    <el-table-column label="成果类型" align="center" prop="achievementType">
                        <template #default="scope">
                        <dict-tag :options="cfg_category_cglx" :value="scope.row.achievementType" :showSpan="true"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" icon="Edit" @click="save(scope.row)" v-hasPermi="['research:product:add']" :disabled="scope.row.disabled">关联平台</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <pagination style="float: right;margin:30px 20px 30px;"
                v-show="totalInverse>0"
                :total="totalInverse"
                v-model:page="queryParamsInverse.pageNum"
                v-model:limit="queryParamsInverse.pageSize"
                @pagination="getListInverse"
                />
            </el-card>
          </div>

          <template #footer>
            <div class="dialog-footer">
              <div class="operate-btns">
                <el-button @click="cancel">关闭</el-button>
              </div>
            </div>
          </template>
        </el-dialog>
    </template>
</Association>

<AchievementPreview ref="achievementPreviewRef" v-model="ModelVisible" :id="achievementId" :type="achievementType"/>
</template>

<script setup name="ResearchProduct">
import cloneDeep from 'lodash/cloneDeep';  
import { back, getCategoryData, getCurRole } from "@/api/research/unit";
import { listProduct, listProductInverse, getProduct, delProduct, addProduct, updateProduct } from "@/api/research/association";

import Association from "../components/Association.vue";
import CardHead from "../components/CardHead.vue";
import AchievementPreview from "@/components/achievementPreview/index.vue"

const { proxy } = getCurrentInstance();

const productList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const productListInverse = ref([]);
const loadingInverse = ref(true);
const totalInverse = ref(0);

const achievementPreviewRef = ref();
const ModelVisible = ref(false);
const achievementId = ref(null);
const achievementType = ref(null);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    researchUnitId: proxy.$route.query.researchUnitId,
    productType: "product",

    name: null,
    //unitId: null,

    firstAuthorName: null,
    achievementType: null,

    //daterangeDate: [],
  },
  queryParamsInverse: {
    pageNum: 1,
    pageSize: 10,
    researchUnitId: proxy.$route.query.researchUnitId,
    productType: "product",
  },
  rules: {}
});

const { queryParams, queryParamsInverse, form, rules } = toRefs(data);

const saved = ref(null);

const cfg_category_ssrsdw = ref([]);
const cfg_category_cglx = ref([]);

onMounted(() => {
  getCategoryData(cfg_category_ssrsdw, {bizName:"所属人事单位"}, true);
  getCategoryData(cfg_category_cglx, { bizName: "成果类型" }, true);
});

function getList() {
  loading.value = true;
//   queryParams.value.params = {};
//   if (null != queryParams.value.daterangeDate && '' != queryParams.value.daterangeDate) {
//     queryParams.value.params["beginDate"] = queryParams.value.daterangeDate[0];
//     queryParams.value.params["endDate"] = queryParams.value.daterangeDate[1];
//   }
  listProduct(queryParams.value).then(response => {
    productList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    saved.value = cloneDeep(queryParams.value);
  });
}

function getListInverse() {
  loadingInverse.value = true;
  listProductInverse(queryParams.value).then(response => {
    productListInverse.value = response.rows;
    totalInverse.value = response.total;
    loadingInverse.value = false;
  });
}

function cancel() {
  open.value = false;
  queryParamsInverse.value.pageNum = 1;
  queryParamsInverse.value.pageSize = 10;
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.researchUnitId = proxy.$route.query.researchUnitId,
  handleQuery();
}

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

function handleAdd() {
  open.value = true;
  title.value = "成果关联机构";
  getListInverse();
}

function save(row) {
    addProduct({
        //id: row.id,
        researchUnitId: proxy.$route.query.researchUnitId,
        productId: row.achievementId,
        productType: "product",
    }).then(response => {
        proxy.$modal.msgSuccess("关联成功");
        row.disabled = true;
        getList();  //handleQuery();
    });
}

function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('您确定要删除吗?').then(function() {
    return delProduct(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

function handleView(row) {
    achievementId.value = row.achievementId;
    achievementType.value = row.achievementType;
    ModelVisible.value = true;
}
onActivated(()=>{if (queryParams.value.researchUnitId===proxy.$route.query.researchUnitId) {if(saved.value){queryParams.value=cloneDeep(saved.value);getList();}} else {resetQuery();}})
getList();
</script>
<style scoped lang="scss">
@import url("@/views/research/index.scss");
:deep(.el-tabs__header) {
  padding: 0 10px;
  margin-bottom: 0;
  background: #fff;
}
:deep(.el-button--danger.is-disabled *){
    color: var(--el-color-danger-light-5) !important;
    -webkit-text-fill-color: var(--el-color-danger-light-5) !important;
}
</style>